<template>
    <view class="goods-item">

        <!-- 图片区域开始 -->
        <view class="cover-box" @click="goto(goods.goods_id)">
            <!-- <image class="cover" :src="global.FILE_DOMAIN + goods.cover_url"/> -->
            <!-- #ifdef MP-WEIXIN -->
            <image class="cover" :lazy-load="true" :src="global.FILE_DOMAIN + goods.cover_url"/>
            <!-- #endif -->

            <!-- #ifdef H5 -->
            <img class="cover" v-img-lazy="global.FILE_DOMAIN + goods.cover_url" />
            <!-- #endif -->
        </view>
        <!-- 图片区域结束 -->

        <!-- 名称区域开始 -->
        <view class="name ellipsis-2">
            <rich-text :nodes="goods.goods_name"></rich-text>
        </view>
        <!-- 名称区域结束 -->


        <!-- 价格区域开始 -->
        <view class="price-box">
            <!-- 价格 -->
            <view class="price">
                <text class="symbol">￥</text>
                <text class="num">{{ (goods.price/100).toFixed(2) }}</text>
            </view>

            <!-- 市场价格 -->
            <view class="market-price">
                <text>￥</text>
                <text>{{ (goods.market_price/100).toFixed(2) }}</text>
            </view>
        </view>
        <!-- 价格区域结束 -->

        <!-- 销售量区域开始 -->
        <view class="sales-box">
            <text class="txt">销售量</text>
            <text v-if="goods.sales_num == 0">10000</text>
            <text v-else>{{ goods.sales_num }}</text>
        </view>
        <!-- 销售量区域结束 -->

        <!-- 操作区域开始 -->
        <view class="option-box" v-if="optionTxt">
            <text class="option" @click="handlerOption(goods.id)">{{ optionTxt }}</text>
        </view>
        <!-- 操作区域结束 -->
    </view>
</template>

<script setup lang="ts">
import { inject } from 'vue'

// 全局属性
const global: any = inject('global')

const emit = defineEmits(['option'])

defineProps({
	goods: {
		type: Object,
		default: {}
	},
	optionTxt: {
		type: String,
		default: ''
	}
})

// 处理操作
const handlerOption = (id:any) => {
	emit('option', {id})
}

// 跳转
const goto = (goodsId:any) => {
	uni.navigateTo({url: '/pagesGoods/goods_detail/index?id='+goodsId})
}
</script>

<style lang="scss">
.goods-item {
    width: 345rpx;
    padding: 20rpx 10rpx;
    margin: 20rpx 10rpx 0 10rpx;
    background-color: #fff;
    border-radius: 8rpx;
    .cover-box {
        width: 300rpx;
        height: 320rpx;
        margin: 0 auto;
        .cover {
            width: 100%;
            height: 100%;
        }
    }

    .name {
        margin-top: 20rpx;
    }

    .price-box {
        margin-top: 10rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .price {
            color: #CF4444;
            .symbol {
                font-size: 28rpx;
            }
            .num {
                font-size: 36rpx;
            }
        }
        .market-price {
            color: #ccc;
            text-decoration: line-through;
            font-size: 24rpx;
        }
    }

    .sales-box {
        margin-top: 10rpx;
        color: #ccc;
        font-size: 24rpx;
        display: flex;

        justify-content: flex-end;
        .txt {
            margin-right: 4rpx;
        }
    }

    .option-box {
        margin-top: 10rpx;
        display: flex;

        justify-content: flex-end;
        color: #ccc;
        font-size: 24rpx;
        .option {
            border: 2rpx solid #008000;
            padding: 4rpx 10rpx;
            border-radius: 4rpx;
            color: #008000;
        }
    }
}
</style>